import { Button, DatePicker, Form, Input, Select } from 'antd';
import FormItem from 'antd/lib/form/FormItem';
import { Link } from 'react-router-dom';
import { message, Upload } from 'antd';
// const {  Upload, message  } = antd;
import { UploadOutlined } from '@ant-design/icons';
import moment from 'moment';
import style from './index.less';
import All_style from '../../../index.less';
import { Space } from 'antd';
import { Table } from 'antd';
import { Checkbox, Row, Col } from 'antd';
import request from '@/http';
// import * as React from 'react';
import React from 'react';
const { Option } = Select;

const fileList = [
  {
    uid: '-1',
    name: 'xxx.png',
    status: 'done',
    url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
    thumbUrl:
      'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
  },
];
/**
 * 上传文件，得到文件
 */
const insertWork = (prop: any) => {
  var [fileList, setFileList] = React.useState([]);
  const [formObject] = Form.useForm();
  const test = async (e) => {
    // console.log(e.target.files)
    let formdata = new FormData();
    formdata.append('file', e.target.files[0]);
    // request.post('/homeWork_manager_module/fileUpload', formdata).then(res => {
    //   setFileList(res)
    //   console.log(filename);
    // })
    const result: any = await request.post('/common/a_t_s/upload', formdata);
    setFileList(result.data);
    console.log(result.data);
  };
  // 作业类型下拉框接口绑定
  const [workType, setWorkType] = React.useState([]);
  const WorkType = async () => {
    const WorkType: any = await request.put('/user_info_manage/getWorkType');
    setWorkType(WorkType.data);
  };
  // 小组选择下拉框绑定接口
  const [teamName, setTeamName] = React.useState([]);
  const TeamName = async () => {
    const TeamName: any = await request.get(
      '/homeWork_manager_module/a_t_s/queryGroup',
    );
    setTeamName(TeamName.data);
  };

  // 课程名称下拉框绑定接口
  const [courseName, setCourseName] = React.useState([]);
  const CourseName = async () => {
    const CourseName: any = await request.get(
      '/homeWork_manager_module/a_t_s/queryCourse',
    );
    setCourseName(CourseName.data);
  };
  const team_name = document.getElementsByName('team_name').keys;
  console.log(team_name);
  // 学生下拉框绑定接口
  const [studentName, setStudentName] = React.useState([]);
  const StudentName = async (a) => {
    const selectForm = await formObject.validateFields(); //获得表单数据
    console.log(a);
    const StudentName: any = await request.post(
      '/homeWork_manager_module/a_t_s/queryStudent',
      `teamName=${a}`, //请求方式
    );
    setStudentName(StudentName.data);
  };
  // 新增作业绑定接口
  const insertWork = async () => {
    const selectForm = await formObject.validateFields(); //获得表单数据
    // 处理日期数据
    // console.log(selectForm);
    const plan_date = selectForm?.plan
      ? selectForm?.plan?.format('YYYY-MM-DD HH:mm:ss')
      : '';
    const work: any = await request.post(
      '/homeWork_manager_module/teacher/addHomeWork',
      {
        courseId: selectForm.course_name,
        studentName: selectForm.student_name,
        teamName: selectForm.group_name,
        workAttachment: fileList,
        workPlanTime: plan_date,
        workTitle: selectForm.work_title,
        workType: selectForm.work_type,
      },
    );
    // console.log('新增成功')
  };
  // 页面预加载
  React.useEffect(() => {
    WorkType();
    TeamName();
    CourseName();
  }, []);
  return (
    <div className={All_style.box}>
      <Form form={formObject}>
        <Form.Item label="作业主题" name={'work_title'}>
          <Input
            placeholder="请输入作业主题"
            className={All_style.inserWorkInput}
          ></Input>
        </Form.Item>

        <div style={{ clear: 'both' }}>
          <Form.Item
            label="计划完成时间"
            name={'plan'}
            style={{ float: 'left' }}
            className={All_style.data}
          >
            <DatePicker
              format="YYYY-MM-DD HH:mm:ss"
              showTime={{ defaultValue: moment('00:00:00', 'HH:mm:ss') }}
              className={All_style.select}
            ></DatePicker>
          </Form.Item>

          <Form.Item
            label="课程名称"
            name={'course_name'}
            style={{ float: 'left' }}
            className={All_style.formItem}
          >
            <Select
              allowClear
              placeholder="请选择"
              className={All_style.select}
              optionFilterProp="children"
              showSearch
            >
              {courseName.map((c: any, index) => {
                return (
                  <Option key={`k_${index}`} value={c.courseId}>
                    {c.courseName}
                  </Option>
                );
              })}
            </Select>
          </Form.Item>

          <Form.Item
            label="作业类型"
            name={'work_type'}
            style={{ float: 'left' }}
            className={All_style.formItem}
          >
            <Select
              allowClear
              placeholder="请选择"
              className={All_style.select}
              optionFilterProp="children"
              showSearch
            >
              {workType.map((c, index) => {
                return (
                  <Option key={`k_${index}`} value={c}>
                    {c}
                  </Option>
                );
              })}
            </Select>
          </Form.Item>
        </div>
        <div style={{ clear: 'both' }}>
          <Form.Item
            label="小组选择"
            name={'group_name'}
            className={All_style.inserWorkSelect}
          >
            <Select
              allowClear
              placeholder="请选择"
              className={All_style.select}
              optionFilterProp="children"
              showSearch
              onSelect={StudentName}
            >
              {teamName.map((c: any, index) => {
                return (
                  <Option key={c.teamName} value={c.teamName}>
                    {c.teamName}
                  </Option>
                );
              })}
            </Select>
          </Form.Item>

          <Form.Item
            label="学生选择"
            name={'student_name'}
            className={All_style.inserWorkSelect}
          >
            <Select
              allowClear
              placeholder="请选择"
              className={All_style.select}
              optionFilterProp="children"
              showSearch
            >
              {studentName.map((c: any) => {
                return <Checkbox value={c.studentId}>{c.studentName}</Checkbox>;
              })}
            </Select>
          </Form.Item>

          <Form.Item label="选择附件" name={'enclosure'}>
            {/* <Button icon={<UploadOutlined />} className={style.Button}>
              上传
            </Button> */}
            {/* <Upload
              action="http://10.8.21.165:8081/homeWork_manager_module/fileUpload"
              // listType="picture"
              data= {FormData}
              name={'file'}
              maxCount={1}
              method={'post'}
              headers={{ Authorization: token }}
              onChange={(info) => {
                console.log('info',info);
                // if (info.file.status === 'done') {
                //   console.log('作业');
                //   // setData({
                //   //   ...data,
                //   // });
                // }
              }}
            >
              <Button icon={<UploadOutlined />} className={style.Button}>
                Upload
              </Button>
            </Upload> */}
            <input type="file" onChange={test} />
          </Form.Item>
        </div>
      </Form>

      <div style={{ clear: 'both', marginTop: 50, marginLeft: 400 }}>
        <Link to="/Teacher/Assignment/Issue/index">
          <Button className={All_style.button} onClick={insertWork}>
            确认提交
          </Button>
        </Link>
        <Link to="">
          <Button className={All_style.button2}>取消</Button>
        </Link>
      </div>
    </div>
  );
};
export default insertWork;
